<template>
    <div class="xzcs-pc-hire">
        <img
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/hire/hire_banner.png"
            class="banner"
            alt=""
        />
        <div class="city">
            <el-popover placement="bottom" width="244" trigger="click">
                <el-cascader
                    v-model="address"
                    ref="citySelect"
                    class="cate-tab-select"
                    placeholder="请选择地区"
                    :options="region"
                    :props="{
                        value: 'name',
                        label: 'name',
                        children: 'children',
                    }"
                    clearable
                    filterable
                    @change="cityChange"
                ></el-cascader>
                <div slot="reference" style="cursor: pointer">
                    <i class="el-icon-location"></i>安徽省合肥市
                </div>
            </el-popover>
        </div>

        <div class="hire-list">
            <div
                v-for="(item, index) in dataList"
                :key="index"
                class="hire-item"
            >
                <div class="company">
                    <div class="left">
                        <div class="name">{{ item.position }}</div>
                        <div class="cname">
                            <i class="el-icon-location-information"></i>
                            {{ item.city }}
                            <div class="line"></div>
                            <i class="el-icon-office-building"></i>
                            {{ item.company_name }}
                        </div>
                    </div>
                    <div class="right">¥&ensp;{{ item.salary }}</div>
                </div>
                <div class="hire-info">
                    <div class="title">
                        <img
                            src="~/assets/images/hire/hire_info_icon.png"
                            alt=""
                        />
                        工作职责
                    </div>
                    <div class="chtml" v-html="item.duty"></div>
                    <div class="title m30">
                        <img
                            src="~/assets/images/hire/hire_info_icon.png"
                            alt=""
                        />
                        任职资格
                    </div>
                    <div class="chtml" v-html="item.qualification"></div>
                    <div class="title m30">
                        <img
                            src="~/assets/images/hire/hire_info_icon.png"
                            alt=""
                        />
                        工作地址
                    </div>
                    <div class="company-adderss">
                        <span>{{ item.address }}</span>
                        <i class="el-icon-phone"></i>联系电话：{{ item.tel }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { get_zhaopindata } from "@/assets/api/hire.js";
import region from "@/assets/json/region-just-city.json";

export default {
    components: {},
    async asyncData({ params }) {
        let data = {
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/vipcenter",
                images: [""],
                title: "会员中心",
                description: "",
                pubDate: "2024-09-05",
                upDate: "2024-09-05",
            },
        };

        return data;
    },
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld),
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: "会员中心-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: "",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "",
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            dataList: [],

            address: ["安徽省", "合肥市"],
            region: [],
            selectAddress: "安徽省/合肥市",
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    created() {},
    mounted() {
        this.get_zhaopindata();

        let regionList = region;
        for (let items of regionList) {
            for (let item of items.children) {
                delete item.children;
            }
        }
        this.region = regionList;
    },
    methods: {
        async get_zhaopindata() {
            const res = await get_zhaopindata({
                city: this.selectAddress,
            });
            if (res.code == 1) {
                this.dataList = res.data;
            }
        },

        cityChange(citys) {
            let label1 = "";
            let label2 = "";
            let label3 = "";
            console.log(citys);
            // this.bankList = [];
            // this.ruleForm.bank_id = "";
            for (let items of this.region) {
                if (items.name == citys[0]) {
                    label1 = items;
                    break;
                }
            }
            for (let item of label1.children) {
                if (item.name == citys[1]) {
                    label2 = item;
                    break;
                }
            }
            // for (let item of label2.children) {
            //     if (item.name == citys[2]) {
            //         label3 = item;
            //         break;
            //     }
            // }
            console.log(label1, label2, label3);
            console.log(this.address);
            this.selectAddress = label1.name + "/" + label2.name;
            this.page = 1;
            this.get_zhaopindata();
        },
    },
};
</script>

<style lang="scss" scoped>
.banner {
    width: 100%;
    height: auto;
}

.city {
    font-weight: 500;
    font-size: 24px;
    color: #081a2f;
    display: flex;
    align-items: center;
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    i {
        color: #1c87f3;
        font-size: 28px;
        padding-right: 12px;
        position: relative;
        top: 1px;
    }
}

.hire-list {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 22px;
}

.hire-item {
    width: 100%;
    border-top: 1px solid #081a2f;
    padding: 24px 0;

    .company {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
            .name {
                font-weight: 500;
                font-size: 22px;
                color: #081a2f;
                padding-bottom: 12px;
            }
            .cname {
                display: flex;
                align-items: center;
                font-weight: 400;
                font-size: 14px;
                color: #081a2f;
                i {
                    color: #bfbfbf;
                    font-size: 16px;
                    padding-right: 5px;
                }
                div {
                    height: 10px;
                    width: 1px;
                    background-color: #d8d8d8;
                    margin: 0 8px;
                }
            }
        }
        .right {
            font-weight: 700;
            font-size: 36px;
            color: #ed1b1b;
        }
    }

    .hire-info {
        background: #ffffff;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.04);
        padding: 10px 15px;
        margin-top: 24px;
        .title {
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 14px;
            color: #081a2f;
            margin-bottom: 12px;
            img {
                width: 15px;
                height: 14px;
                margin-right: 9px;
            }
        }
        .m30 {
            margin-top: 20px;
        }
        .company-adderss {
            font-weight: 400;
            font-size: 14px;
            color: #081a2f;
            display: flex;
            align-items: center;
            span {
                margin-right: 30px;
            }
            i {
                margin-right: 5px;
                font-size: 16px;
                color: #1c87f3;
            }
        }
    }
}
</style>
